#{extends 'main.html' /}
#{set title:messages.get("application.deals.text")/}
#{set moreOptions:"onload='initialize()' " /}

<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

	function initialize() {
		
		// TODO : deals to be populated here
		// that is load the deal search results here
		var locations = [
			#{list items:deals, as:'deal'}
				[
				 	'<p><b><a href="/deal/${deal.id}">${deal.title}</a></b></p>' +
				 	'	<p><strike>${deal.oldPrice}</strike>&nbsp;<b>${deal.discountPrice}&euro;</b></p>',
				 	${deal.latitude}, 
				 	${deal.longitude}, 
				 	${deals.indexOf(deal)+1}
				 ]
				#{if deal != deals.get(deals.size() - 1)}
					,
				#{/if}
			#{/list}
        ];

	    var map = new google.maps.Map(document.getElementById('map_canvas'), {
	      zoom: 10,
	      center: new google.maps.LatLng(48.210845, 11.5641416),
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    });
	
	    var infowindow = new google.maps.InfoWindow();
	
	    var marker, i;
	
	    for (i = 0; i < locations.length; i++) {  
	      marker = new google.maps.Marker({
	        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	        map: map
	      });
	
	      google.maps.event.addListener(marker, 'click', (function(marker, i) {
	        return function() {
	          infowindow.setContent(locations[i][0]);
	          infowindow.open(map, marker);
	        }
	      })(marker, i));
	    }
	}
</script>
<div id="searchResults">
	<h2 style="float:left;">
		&{'most.recent.deal'}
	</h2>
	<div style="float: right;">
		#{form @Deals.displayResults()}
			<input type="hidden" name="searchType" value="simple" />
			#{if params.get("categoryId") != null}
				<input type="hidden" name="categoryId" value="${params.get("categoryId")}" />	
			#{/if}
			#{field 'simpleSearch'}
				<input class="search" type="text" name="${field.name}" size="20" value="" placeholder="Filter deals">							
			#{/field}
		#{/form}
	</div>
	<div style="clear: both;"></div>
		<div id="map_canvas"></div>					
		#{list items:deals, as:'deal'}
	    	<div class="searchResult">
	    		<div class="dealThumbnail">
	    			#{if deal.photo.get() != null}
	    				<img class="searchResultsImage" src="@{Deals.dealPhoto(deal.id)}"/>
	    			#{/if}
	    		</div>
				<div class="dealTitle">
					<a href="@{Deals.viewDeal(deal.id)}">${deal.title} <br> ${deal.discountPrice}&euro;</a>
				</div>
				<div class="dealLocation">
					${deal.address.street} ${deal.address.houseNumber}, ${deal.address.city}
				</div>
				<div class="dealTimespan">
					&{'deal.valid.from.to.text', deal.startDate.format(), deal.endDate.format()}
				</div>
				<div class="daysRemaining">&{'days.remaining.text'}:<span>${deal.remainingDays()}</span></div>
				<div class="clear"></div>
			</div>
				
		#{/list}
	<div class="clear"></div>
</div>